<template>
  <div class="event-bus-receiver">
    <h3>接收组件</h3>
    <div class="message-list">
      <p 
        v-for="(msg, index) in messages" 
        :key="index"
      >
        {{ msg }}
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import EventBus from './EventBus'

const messages = ref([])

const handleMessage = (msg) => {
  messages.value.push(msg)
}

onMounted(() => {
  // 注册事件监听
  EventBus.on('message', handleMessage)
})

onUnmounted(() => {
  // 取消事件监听，防止内存泄漏
  EventBus.off('message', handleMessage)
})
</script>

<style scoped>
.event-bus-receiver {
  padding: 15px;
  background-color: #f0f6ff;
  border-radius: 5px;
}
.message-list {
  max-height: 200px;
  overflow-y: auto;
}
</style>
